<template>
    <div class="news">
        <div  class="item" v-for="(item,index) in list">
            <div class="left">
                <img :src="item.imageUrl">
            </div>
            <div class="right">
                <div class="top">
                    {{item.title}}!
                </div>
                <div class="bottom">
                    {{item.content}}
                </div>
            </div>
        </div>

    </div>
</template>

<script>


    let socket;
    export default {
        name: 'Chat',
        props:['list','baseUrl'],

        computed:{
            userId(){
                return Number(sessionStorage.getItem('userId'))
            },
            currentKey(){
                return Number(window.sessionStorage.getItem('currentKey'))
            }
        },
        data(){
            return{
                list:[],
                baseUrl:null,
                query:{
                    pageNum:1,
                    pageSize:100
                }
            }
        },


        methods:{

        }
    };
</script>

<style scoped>
    .news{
        width: 1300px;
        margin: 0 auto;
        height: 600px;
    }
    .news .item{
        width: 96%;
        /*height: 130px;*/
        background-color: white;
        margin:10px 25px;
        display: inline-flex;
        border-radius: 10px;
        border: 3px solid #f1f3f4;
    }
    .news .item .left{
        flex: 1;
    }
    .news .item .left img{
        width: 100%;
        height: 100%;
        border: 0;
        padding: 5px;
    }
    .news .item .right{
        flex: 6;
        display: inline-flex;
        flex-direction: column;
    }
    .news .item .right .top{
        flex: 1;
        padding-left: 20px;
        line-height: 40px;
    }
    .news .item .right .bottom{
        flex: 3;
        padding-left: 20px;
        color: #323233;
        font-size: 14px;
        line-height: 30px;
    }
</style>
